<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            padding: 0%;
            margin: 0%;
        }

        .box {
            width: 60%;
        }

        table {
            border: coral;
            text-align: center;
            width: 80%;
        }
    </style>
</head>

<body>
    <div class="box">
        <table border="1px" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>kky</td>
                    <td>18</td>
                    <td>18男</td>
                    <td>学习</td>
                    <td><button>上移</button><button>删除</button><button>下移</button></td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <script src="./index.js"></script>
    <script>
        var arr = JSON.parse(localStorage.obj20191112);
        var tbody = document.querySelector("tbody");
        show(arr);
        //  存值
        function setLocal(arr) {
            localStorage.setItem("obj20191112", JSON.stringify(arr));
        }
        //  渲染页面
        function show(arr) {
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += `<tr>
                            <td>${i + 1}</td>
                            <td>${arr[i].myName}</td>
                            <td>${arr[i].myAge}</td>
                            <td>${arr[i].sex}</td>
                            <td>${arr[i].aihao}</td>
                            <td><button class="sy" onclick="syFun(${
                              arr[i].id
                            })">上移</button><button onclick="del(${
            arr[i].xuhao
          })">删除</button><button class="xy" onclick="xyFun(${
            arr[i].id
          })">下移</button></td>
                        </tr>`;
            }
            tbody.innerHTML = str;
            show1()
        }
        // 上移下移按钮禁用
        function show1() {
            var shangyi = document.querySelectorAll(".sy");
            var xiayi = document.querySelectorAll(".xy");
            for (var i = 0; i < arr.length; i++) {
                if (i == 0) {
                    shangyi[0].disabled = true;
                }
                if (i == arr.length - 1) {
                    xiayi[arr.length - 1].disabled = true;
                }
            }
        }

        //  删除
        function del(id) {
            console.log(id);
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].xuhao) {
                    arr.splice(i, 1);
                }
            }
            setLocal(arr);
            show(arr);
        }
        //    上移
        function syFun(id) {
            var sum;
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    sum = arr[i];
                    arr[i] = arr[i - 1];
                    arr[i - 1] = sum;
                }
            }
            show(arr);
            setLocal(arr);
        }
        //    下移
        function xyFun(id) {
            var sum1;
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    sum1 = arr[i + 1];
                    console.log(arr.length);
                    arr[i + 1] = arr[i];
                    console.log(arr[i]);
                    arr[i] = sum1;
                    console.log(arr[i + 1]);
                    show(arr);
                    setLocal(arr);
                    return
                }
            }
        }
        // function xyFun(id) {
        //     var sum1;
        //     for (var i = 0; i < arr.length; i++) {
        //         if (id == arr[i].id) {
        //             sum1 = arr[i + 1];
        //             console.log(arr.length);
        //             arr[i + 1] = arr[i];
        //             console.log(arr[i]);
        //             arr[i] = sum1;
        //             console.log(arr[i + 1]);
        //         }
        //     }
        //     show(arr);
        //     setLocal(arr);
        // }
    </script>
</body>

</html>